<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 待办清单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/pinia/2.1.7/pinia.iife.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        .add-task {
            padding: 30px;
            border-bottom: 1px solid #eee;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        .task-input {
            flex: 1;
            padding: 15px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .task-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .add-btn {
            padding: 15px 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            transition: transform 0.2s;
        }
        
        .add-btn:hover {
            transform: translateY(-2px);
        }
        
        .add-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .task-list {
            padding: 30px;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        .task-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        
        .task-item.completed {
            opacity: 0.7;
        }
        
        .task-item.completed .task-text {
            text-decoration: line-through;
            color: #6c757d;
        }
        
        .task-checkbox {
            width: 20px;
            height: 20px;
            margin-right: 15px;
            cursor: pointer;
        }
        
        .task-text {
            flex: 1;
            font-size: 16px;
            color: #333;
        }
        
        .task-text.editing {
            background: white;
            border: 2px solid #667eea;
            padding: 8px 12px;
            border-radius: 5px;
            outline: none;
        }
        
        .task-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .btn-edit {
            background: #ffc107;
            color: #333;
        }
        
        .btn-delete {
            background: #dc3545;
            color: white;
        }
        
        .btn-save {
            background: #28a745;
            color: white;
        }
        
        .btn-cancel {
            background: #6c757d;
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        
        .empty-state i {
            font-size: 4em;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            padding: 20px 30px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            font-size: 14px;
            color: #6c757d;
        }
        
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.5s;
        }
        
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1><i class="fas fa-tasks"></i> 待办清单</h1>
                <p>管理你的日常任务</p>
            </div>
            
            <div class="add-task">
                <div class="input-group">
                    <input 
                        type="text" 
                        class="task-input" 
                        placeholder="添加新任务..." 
                        v-model="newTask"
                        @keyup.enter="addTask"
                    >
                    <button class="add-btn" @click="addTask" :disabled="!newTask.trim()">
                        <i class="fas fa-plus"></i> 添加
                    </button>
                </div>
            </div>
            
            <div class="task-list">
                <transition-group name="fade" tag="div">
                    <div 
                        v-for="task in tasks" 
                        :key="task.id"
                        class="task-item"
                        :class="{ completed: task.completed }"
                    >
                        <input 
                            type="checkbox" 
                            class="task-checkbox"
                            v-model="task.completed"
                            @change="toggleTask(task.id)"
                        >
                        
                        <div class="task-text" v-if="!task.editing" @dblclick="startEdit(task.id)">
                            {{ task.text }}
                        </div>
                        <input 
                            v-else
                            type="text"
                            class="task-text editing"
                            v-model="task.editText"
                            @keyup.enter="saveEdit(task.id)"
                            @keyup.esc="cancelEdit(task.id)"
                            @blur="saveEdit(task.id)"
                            ref="editInput"
                        >
                        
                        <div class="task-actions">
                            <button 
                                v-if="!task.editing"
                                class="btn btn-edit" 
                                @click="startEdit(task.id)"
                            >
                                <i class="fas fa-edit"></i>
                            </button>
                            <button 
                                v-if="task.editing"
                                class="btn btn-save" 
                                @click="saveEdit(task.id)"
                            >
                                <i class="fas fa-check"></i>
                            </button>
                            <button 
                                v-if="task.editing"
                                class="btn btn-cancel" 
                                @click="cancelEdit(task.id)"
                            >
                                <i class="fas fa-times"></i>
                            </button>
                            <button 
                                class="btn btn-delete" 
                                @click="deleteTask(task.id)"
                            >
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </transition-group>
                
                <div v-if="tasks.length === 0" class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>暂无任务</h3>
                    <p>添加你的第一个任务开始吧！</p>
                </div>
            </div>
            
            <div class="stats">
                <span>总计: {{ totalTasks }} 个任务</span>
                <span>已完成: {{ completedTasks }} 个</span>
                <span>待完成: {{ pendingTasks }} 个</span>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, nextTick } = Vue;
        const { createPinia, defineStore } = Pinia;

        // 创建 Pinia store
        const useTodoStore = defineStore('todo', () => {
            const tasks = ref([]);
            
            // 从本地存储加载任务
            const loadTasks = () => {
                const saved = localStorage.getItem('vue-todo-tasks');
                if (saved) {
                    tasks.value = JSON.parse(saved);
                }
            };
            
            // 保存到本地存储
            const saveTasks = () => {
                localStorage